<template>
  <div class="home">
    
    <van-swipe class="my-swipe" :autoplay="1000" :show-indicators="false" >
      <van-swipe-item v-for="(item) of banner" :key="item._id" @click="goto_detail(item._id)">
        
        <!-- <router-link :to="`/home/${item._id}?collectionName=home`"> -->
        <router-link :to="{name:'home-detail',params:{_id:item._id},query:{collectionName:'banner'}}">
          <img :src="$serverUrl + item.banner" alt=""/>
          <div class="text-box">
            <h2>{{item.title}}</h2>
            <p>{{item.sub_title}}</p>
          </div>
        </router-link>
        
      </van-swipe-item>
    </van-swipe>
    
    <div class="newsList">
      <ul>
        <router-link 
          tag="li"
          v-for="(item,index) of home" 
          :key="item._id"
          :to="`/home/${item._id}?collectionName=home`"
        >
          <a href="article_m.html">
            <h2>{{index + 1 }}.{{item.title}}</h2>
            <p>{{item.des}}</p>
          </a>
        </router-link>
      </ul>
    </div>
    
  </div>
</template>

<script>
  // import axios from 'axios';
  export default {
    name:'home',
    props:{},
    data(){
      return {
        banner:[],
        home:[]
      }
    },
    components:{},
    mounted(){
      // axios({
      this.$axios({
        url:'/news/banner',
        params:{_limit:3},
      }).then(//排错// res=>console.log(res)
	res=>this.banner=res.data
      ).catch(err=>console.log(err))

      this.$axios({
        url:'/news/home',
        params:{_limit:30},
      }).then(
        res=>this.home=res.data
      )
    },
    updated(){},
    methods:{
      // goto_detail(_id){
      //   // this.$router.push(`/banner/${_id}?collectionName=home`)
      // }
    },
    computed: {
    }
  }
</script>

<style scoped>
 .my-swipe .van-swipe-item {
   color: #fff;
   font-size: 20px;
   line-height: 150px;
   background-color: #39a9ed;
   float: left;
 }
 
 .my-swipe{max-width:6.4rem; margin:0 auto; }
 .my-swipe{margin-top:0.6rem;position: relative;overflow: hidden; z-index: 1}
 .my-swipe .van-swipe-item{width:6.4rem;float:left;position: relative;}
 .my-swipe img{width:100%; display:block;}
 .my-swipe .text-box{width:5.8rem; padding:0 0.3rem;height:1.24rem; position:absolute; left:0; bottom:0; color:#fff; background:rgba(0,0,0,0.5);}
 .my-swipe h2{ font-size:0.3rem; font-weight:normal; margin-top:0.22rem; line-height:100%; margin-bottom:0.22rem; overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
 .my-swipe p{ line-height:100%;}
 
 
 .newsList{width:6.4rem; margin:0 auto;}
 .newsList ul{ padding:0 0.4rem;}
 .newsList ul li{ color:#494d4d; padding:0.2rem 0; border-bottom:1px dashed #ccc;}
 .newsList ul li h2{max-height:0.9rem; font-size:0.33rem; overflow:hidden;}
 .newsList ul li p{max-height:1.8rem; margin-top:0.05rem;overflow:hidden;}
 .newsList{clear: both;margin-bottom:1rem;}
 
 
</style>
